<template>
  <div id="app">
    <div class="content">
      <!-- 左菜单 -->
      <div class="left">
        <div class="left_1">
          <div class="pic"><img src="../image/3da7de1e85a3d8673c9360f99ed4284.png"></div>
          <div>欢迎！</div>
          <div>智学商城-后台管理系统</div>
        </div>
      </div>
      <!-- 右菜单 -->
      <div class="right">
        <div class="right_1">
          <div>登录</div>
          <!-- 表单组件 -->
          <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <el-form-item prop="username">
              <el-input v-model.trim="ruleForm.username" type="text" autocomplete="off" :prefix-icon="User" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model.trim="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
          </el-form>
          <p>作者:cyf</p>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive } from 'vue'//引入响应
import type { FormInstance } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'//引入图标
import { ElMessage } from 'element-plus'//引入消息弹出框
import { useRouter, useRoute } from "vue-router"//引入路由
import { post } from '@/untils/request'//引入请求方式
import cookie from 'js-cookie'
import { useUsertore } from '@/stores/user'//使用状态
import { debounce } from '@/handle/debounce'//引入防抖节流

const ruleFormRef = ref<FormInstance>()
const store = useUsertore()
const route = useRoute()
const router = useRouter()
//用户名与密码的非空验证
const validateUser = (rule: string, value: string, callback: Function) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    callback()
  }
}
const validatePass = (rule: string, value: string, callback: Function) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
//表单数据
const ruleForm = reactive({
  username: 'admin2',//用户名
  password: '1234567'//密码
})
//验证规则
const rules = reactive({
  username: [{ validator: validateUser, trigger: 'blur' }],
  password: [{ validator: validatePass, trigger: 'blur' }]
})
//提交登录
const login = (formEl: FormInstance | undefined) => {

  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let data = {
        _gp: 'admin',
        _mt: 'login',
        ...ruleForm
      }
      post(data).then((res: any) => {
        let { errmsg, data: token, errno } = res//解构赋值,处理数据为一个data
        if (200 == errno) {//确定的200放前面,不确定的errno放后面,两个==值同类型可以不同,三个===值与类型必须都要相同才能使用
          Object.assign(store.loginInfo, ruleForm)//将用户信息保存在store状态中
          ElMessage.success('登录成功!')
          let now = new Date()//获取当前时间
          now.setTime(now.getTime() + 1000 * 60 * 40)//过30秒登录过期,则重新登录
          cookie.set("token", token, { expires: now })//存储令牌
          return Promise.resolve(token)
        } else {
          return Promise.reject(errmsg)
        }
      }).then((res) => {//获取用户信息
        const data = {
          _gp: 'admin',
          _mt: 'info',
        };
        post(data).then((res: any) => {
          let { errmsg, data, errno } = res
          if (200 == errno) {
            store.setUser(data)
            let back = route.query.back;
            if (back) {
              router.replace(<string>back) //<string>断言,解决类型引发的报错
              return;
            }
            router.replace({
              path: '/' //跳转主页
            })
          } else {
            return Promise.reject(errmsg)
          }
        })
      }).catch(err => {
        console.log(err);
        ElMessage.error(err)
      })
    } else {
      return false
    }
  })
}
let submitForm = debounce(login, 3000)

</script>
  
<style  scoped lang="less">
body {
  margin: 0;
  padding: 0;
}

#app {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/image/085757bfe33d15d3d99666697bf7a6e.jpg');
  background-size: 100% 100%;
  height: 100vh;
  position: fixed;

  .content {
    width: 70%;
    height: 500px;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    background-color: #005DE9;

    .left {
      width: 30%;
      color: white;
      text-align: center;
      display: flex;
      line-height: 30px;
      align-items: center;

      .left_1 {
        width: 100%;

        .pic {
          width: 30%;
          height: 30%;
          background-color: #005DE9;
          border-radius: 50%;
          overflow: hidden;
          margin: auto;
          margin-bottom: 5px;
          text-align: center;
          box-shadow: 5px -10px 35px 1px #fff;

          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
            margin: auto;

          }
        }

      }
    }

    .right {
      width: 70%;
      height: 100%;
      background-color: #fff;
      text-align: center;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: auto;
      text-align: center;
      justify-content: space-around;
      border-radius: 0px 5px 5px 0px;

      .right_1 {
        width: 100%;

        >div:nth-child(1) {
          margin-bottom: 20px;
        }

        .el-form {

          .el-form-item {

            width: 70%;
            margin: 25px auto;
            line-height: 40px;

            .el-input {
              height: 38px;

            }
          }
        }

        .el-button {
          width: 130px;
          height: 38px;
          text-align: center;
          margin: auto;
        }
      }
    }
  }

}
</style>
